<template>
  <div>
    <el-collapse value="common">
      <el-collapse-item title="公共配置" name="common">
        <el-form :model="widget.UI.data" label-width="50px" size="mini" class="pad-lft-rgt-10">
          <el-form-item label="格式">
            <el-select
              v-model="widget.UI.data.format"
              :clearable="true"
              placeholder="请选择日期/时间格式"
              class="width-100"
              @change="dateTimeFormatChange">
              <el-option
                v-for="format in formatOptions" :key="format.value"
                :label="format.label" :value="format.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import {WidgetDateTime} from "@/modules/IDE/widget/atom/WidgetDateTime";

  export default {
    name: 'InputSpec',
    props: {
      widget: {
        type: WidgetDateTime,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        formatOptions: []
      };
    },
    mounted() {
      this.formatOptions = [
        {
          label: '时间',
          value: 'time'
        },
        {
          label: '年-月-日',
          value: 'date'
        },
        {
          label: '*年*月*日',
          value: 'dateCN'
        },
        {
          label: '年/月/日',
          value: 'dateSlant'
        },
        {
          label: '*月*日',
          value: 'monthDayCN'
        },
        {
          label: '月-日',
          value: 'monthDay'
        },
        {
          label: '月/日',
          value: 'monthDaySlant'
        },

        {
          label: '年-月-日 时:分',
          value: 'datetime'
        },
        {
          label: '月-日 时:分',
          value: 'datetimeMDHM'
        },
        {
          label: '年',
          value: 'year'
        },
        {
          label: '月',
          value: 'month'
        },
        {
          label: '日',
          value: 'day'
        },
        {
          label: '星期',
          value: 'week'
        },
      ];
    },
    methods: {
      dateTimeFormatChange() {
        this.$EventBus.$emit('dateTimeFormatChange', this.widget.id);
      }
    },
  };
</script>

<style scoped>
</style>
